<template>
  <el-container style="height: 100%; overflow: hidden">
    <el-header>
      <h1 class="shijuan">{{ studentnews.exam_name }}</h1>
      <ul class="student">
        <!-- <li>
          考生姓名：<span>{{ studentnews.name }}</span>
        </li>
        <li>
          地级市：<span>{{ studentnews.dept_name }}</span>
        </li>
        <li>
          考试类别：<span>{{ studentnews.subject_name }}</span>
        </li>
        <li>
          身份证：<span>{{ studentnews.student_card }}</span>
        </li>
        <li>
          准考证：<span>{{ studentnews.zkz }}</span>
        </li> -->
        <li>
          考试时间<span>{{ time }}分钟</span>
        </li>
        <li>
          剩余<span class="red">{{ count }}</span>
        </li>
        <!-- <li style="padding-left: 100px">
          共<span class="red">{{ studentnews.tiliang }}</span
          >题
        </li> -->
        <li>
          总分<span class="red">{{ studentnews.total_score }}</span
          >分
        </li>
      </ul>
    </el-header>
    <el-main>
      <div class="answersheet">
        <div class="answersheetnews">
          <p>答题卡</p>
          <ul>
            <li>已答<span style="background: #4571f6"></span></li>
            <li>未答<span></span></li>
          </ul>
        </div>
        <div class="answersheetlist">
          <div class="listdecorate" v-if="danxuannum > 0">
            <h1>单选题</h1>
            <ul>
              <li
                v-for="(item, index) in danxuanlist"
                :key="index"
                :class="item.answer !== '' ? 'dci_num' : ''"
                @click="optionNumClick(item.question_no)"
              >
                {{ index + 1 }}
              </li>
            </ul>
          </div>
          <div class="listdecorate" v-if="panduannum > 0">
            <h1>判断题</h1>
            <ul>
              <li
                v-for="(item, index) in panduanlist"
                :key="index"
                :class="item.answer !== '' ? 'dci_num' : ''"
                @click="optionNumClick(item.question_no)"
              >
                {{ index + 1 }}
              </li>
            </ul>
          </div>
          <div class="listdecorate" v-if="duoxuannum > 0">
            <h1>多选题</h1>
            <ul>
              <li
                v-for="(item, index) in duoxuanlist"
                :key="index"
                :class="item.answer !== '' ? 'dci_num' : ''"
                @click="optionNumClick(item.question_no)"
              >
                {{ index + 1 }}
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="testpaper">
        <div class="mainbox" v-if="danxuannum > 0">
          <h2 class="zuoti-tie">
            单选题(共{{ danxuannum }}题，每题{{ danxuanfen }}分)
          </h2>
          <div
            v-for="(item, index) in danxuan"
            :key="item.id"
            class="ti"
            :id="item.id"
          >
            <h1 class="liti">
              <span>第{{ index + 1 }}题、</span
              ><span>{{ item.questionName }}</span>
            </h1>
            <el-radio-group
              v-model="checkList[item.id]"
              class="w_radio"
              @change="answerChange($event, item.id)"
            >
              <el-radio
                v-for="(i, d) in item.answerList"
                :key="d"
                border
                :label="i.value"
                >{{ i.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="mainbox" v-if="panduannum > 0">
          <h2 class="zuoti-tie">
            判断题(共{{ panduannum }}题，每题{{ panduanfen }}分)
          </h2>
          <div
            v-for="(item, index) in panduan"
            :key="item.id"
            class="ti"
            :id="item.id"
          >
            <h1 class="liti">
              <span>第{{ index + 1 }}题、</span
              ><span>{{ item.questionName }}</span>
            </h1>
            <el-radio-group
              v-model="checkList[item.id]"
              class="w_radio"
              @change="answerChange($event, item.id)"
            >
              <el-radio
                v-for="(i, d) in item.answerList"
                :key="d"
                border
                :label="i.value"
                >{{ i.label }}
              </el-radio>
            </el-radio-group>
          </div>
        </div>
        <div class="mainbox" v-if="duoxuannum > 0">
          <h2 class="zuoti-tie">
            多选题(共{{ duoxuannum }}题，每题{{ duoxuanfen }}分)
          </h2>
          <div
            v-for="(item, index) in duoxuan"
            :key="item.id"
            class="ti"
            :id="item.id"
          >
            <h1 class="liti">
              <span>第{{ index + 1 }}题、</span
              ><span>{{ item.questionName }}</span>
            </h1>
            <el-checkbox-group
              v-model="checkList[item.id]"
              @change="answerChange($event, item.id)"
            >
              <el-checkbox
                class="checklabel"
                v-for="(i, d) in item.answerList"
                :key="d"
                :label="i.value"
                border
              >
                {{ i.label }}
              </el-checkbox>
            </el-checkbox-group>
          </div>
        </div>
      </div>
    </el-main>
    <el-footer>
      <el-button size="medium" type="primary" style="" @click="submitexam">
        提交试卷
      </el-button>
    </el-footer>
  </el-container>
</template>

<script>
import {   getkaojuanDetail,
  getExamList,
  
  SubmitAnswers, } from "@/api/whpx/ksUser";
import Cookies from "js-cookie";
export default {
  data() {
    return {
      id: "", //考生id
      studentnews: {}, //考生信息
      time: "", //总时长
      count: "", //倒计时
      seconds: "", // 秒数
      testlist: [], //试题
      jieshu: false,
      danxuan: [],
      panduan: [],
      duoxuan: [],
      danxuannum: "",
      danxuanfen: "",
      checkList: [],
      panduannum: "",
      panduanfen: "",
      duoxuannum: "",
      duoxuanfen: "",
      lastUserAnswer: [],
      answerlist: [],
      examTotal: 0,
      timer1: null,
      danxuanlist: [],
      panduanlist: [],
      duoxuanlist: [],
      websocketData: "",
      shijuanid:''
    };
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
  },
  methods: {
    
    handleScroll() {
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      this.visibleButton = scrollTop > 500;
    },
    optionNumClick(data) {
      let target = document.getElementById(data);
      if (target) {
        target.scrollIntoView({
          block: "start",
          behavior: "instant",
        });
      }
    },
    // getgetkaojuanDetail(id) {
    //   getkaojuanDetail(id).then((res) => {
    //     this.studentnews = res.data;
    //     this.time = res.data.exam_duration;
    //   });
    // },
    countDown() {
      let h = parseInt((this.seconds / (60 * 60)) % 24);
      h = h < 10 ? "0" + h : h;
      let m = parseInt((this.seconds / 60) % 60);
      m = m < 10 ? "0" + m : m;
      let s = parseInt(this.seconds % 60);
      s = s < 10 ? "0" + s : s;
      this.count = h + "时" + m + "分" + s + "秒";
    },
    Time() {
      let clock = setInterval(() => {
        this.seconds -= 1;
        this.countDown();
        let that = this;
        if (this.seconds <= 0) {
          clearInterval(clock);
          this.$alert("考试时间已到，即将交卷", "提示", {
            confirmButtonText: "确定",
            callback: (action) => {
              SubmitAnswers({
                id: that.shijuanid,
                isSubmit: "1",
                stuanwser: JSON.stringify(that.lastUserAnswer),
              }).then((res) => {
                if (res.code == 200) {
                  getkaojuanDetail(that.shijuanid).then((res) => {
                    let defen = res.data.defen;
                    this.$alert("你的考试成绩为" + defen + "分", "考试成绩", {
                      confirmButtonText: "确定",
                      callback: (action) => {
                        this.$router.replace({ path: "/exam" });
                        next(false);
                        Cookies.remove("session_id");
                        Cookies.remove("session_zkz");
                      },
                    });
                  });
                } else {
                  this.$message(res.msg);
                }
              });
            },
          });
        }
      }, 1000);
    },
    getData() {
      this.testlist = [];
      this.danxuan = [];
      this.panduan = [];
      this.duoxuan = [];
      getExamList({
        userId : Cookies.get("id"),
        ksSpecialty: Cookies.get("ksSpecialty")
      }).then((res) => {
        if (res.code == 200) {
          this.testlist = res.data.questionList;
          this.seconds = res.data.timeSecond;
          Cookies.set("shijuanid", res.data.kaojuanId);
          for (var i = 0; i < this.testlist.length; i++) {
            if (this.testlist[i].questionType == "1") {
              this.danxuan.push(this.testlist[i]);
              this.$set(
                this.checkList,
                this.testlist[i].id,
                this.testlist[i].stuanwser
              );
            } else if (this.testlist[i].questionType == "2") {
              this.panduan.push(this.testlist[i]);
              this.$set(
                this.checkList,
                this.testlist[i].id,
                this.testlist[i].stuanwser
              );
            } else {
              this.duoxuan.push(this.testlist[i]);
              var str = this.testlist[i].stuanwser.split("");
              this.$set(this.checkList, this.testlist[i].id, str);
            }
          }

          this.danxuannum = this.danxuan.length;
          this.danxuanfen = this.danxuan[0].score;
          this.panduannum = this.panduan.length;
          this.panduanfen = this.panduan[0].score;
          this.duoxuannum = this.duoxuan.length;
          this.duoxuanfen = this.duoxuan[0].score;
        }
      });
    },
    getkaojuanDetail(id) {
      getkaojuanDetail(id).then((res) => {
        if (res.code == 200) {
          this.lastUserAnswer = JSON.parse(res.data.stuanwser);
          for (var i = 0; i < this.lastUserAnswer.length; i++) {
            if (this.lastUserAnswer[i].question_type == "1") {
              this.danxuanlist.push(this.lastUserAnswer[i]);
            } else if (this.lastUserAnswer[i].question_type == "2") {
              this.panduanlist.push(this.lastUserAnswer[i]);
            } else {
              this.duoxuanlist.push(this.lastUserAnswer[i]);
            }
          }
          this.examTotal = this.lastUserAnswer.length;
        }
      });
    },
    //试题change事件
    answerChange(e, id) {
      for (var i = 0; i < this.lastUserAnswer.length; i++) {
        if (id == this.lastUserAnswer[i].question_no) {
          if (this.lastUserAnswer[i].question_type == "1") {
            this.lastUserAnswer[i].answer = e;
          } else if (this.lastUserAnswer[i].question_type == "2") {
            this.lastUserAnswer[i].answer = e;
          } else {
            let list = e.sort();
            let str = list.toString().replace(/,/g, "");
            this.lastUserAnswer[i].answer = str;
          }
        }
      }
      this.settimesubmit();
    },
    //提交试卷
    submitexam() {
      // SubmitAnswers().then(res=>{})
      this.answerlist = [];
      for (var i = 0; i < this.lastUserAnswer.length; i++) {
        if (this.lastUserAnswer[i].answer == "") {
          this.answerlist.push(this.lastUserAnswer[i]);
        }
      }
      //未作答题数
      var num = Number(this.answerlist.length);
      //总题数
      var num2 = Number(this.examTotal);
      let that = this;
      if (num !== 0) {
        this.$confirm("你有" + num + "道题未答", "确认要提交试卷吗？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            SubmitAnswers({
              id: that.shijuanid,
              isSubmit: "1",
              stuanwser: JSON.stringify(that.lastUserAnswer),
            }).then((res) => {
              if (res.code == 200) {
                getkaojuanDetail(that.shijuanid).then((res) => {
                  let defen = res.data.defen;
                  this.$alert("你的考试成绩为" + defen + "分", "考试成绩", {
                    confirmButtonText: "确定",
                    callback: (action) => {
                      this.$router.replace({ path: "/exam" });
                      next(false);
                      Cookies.remove("session_id");
                      Cookies.remove("session_zkz");
                    },
                  });
                });
              } else {
                this.$message(res.msg);
              }
            });
          })
          .catch(() => {});
      } else {
        this.$confirm("你已答完所有题目", "确认要提交试卷吗？", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        })
          .then(() => {
            SubmitAnswers({
              id: that.shijuanid,
              isSubmit: "1",
              stuanwser: JSON.stringify(that.lastUserAnswer),
            }).then((res) => {
              if (res.code == 200) {
                getkaojuanDetail(that.shijuanid).then((res) => {
                  let defen = res.data.defen;
                  this.$alert("你的考试成绩为" + defen + "分", "考试成绩", {
                    confirmButtonText: "确定",
                    callback: (action) => {
                      //this.$router.push({ path: "/studentExams" });
                      this.$router.replace({ path: "/exam" });
                      next(false);
                      Cookies.remove("session_id");
                      Cookies.remove("session_zkz");
                    },
                  });
                });
              } else {
                this.$message(res.msg);
              }
            });
          })
          .catch(() => {});
      }
    },
    settimesubmit() {
      SubmitAnswers({
        id: this.shijuanid,
        isSubmit: "0",
        stuanwser: JSON.stringify(this.lastUserAnswer),
      }).then((res) => {});
    },
  },
  created() {
    this.id = Cookies.get("id");
    this.shijuanid = Cookies.get("shijuanid")
    this.studentnews.exam_name = Cookies.get("session_templateName")
    this.time = Cookies.get("session_time")
      this.studentnews.total_score = Cookies.get("session_total")
    // this.getgetkaojuanDetail(this.id);
    this.getkaojuanDetail(this.shijuanid);
    this.getData();
    console.log(77, this.seconds);
    this.Time();

    let e = "23434";
    let yanshi = Number(e);
    this.seconds = Number(this.seconds) + Number(yanshi);
    console.log(88, this.seconds);
  },
};
</script>

<style lang="scss" scoped>
.dci_num {
  background: #4571f6;
  color: #fff;
}
.el-header {
  height: 100px !important;
  font-size: 16px;
  padding: 0;
  .shijuan {
    height: 40px;
    line-height: 40px;
    background: #4571f6;
    padding: 0 20px;
    color: #fff;
    text-align: center;
  }
  .student {
    height: 60px;
    line-height: 60px;
    display: flex;
    padding: 0 20px;
    li {
      padding-right: 35px;
    }
  }
}
.el-main {
  background: #f6f6f6;
  display: flex;
  .answersheet {
    width: 350px;
    height: 100%;
    overflow: auto;
    margin-right: 30px;
    background: #fff;
    box-sizing: border-box;
    padding: 10px 20px;
    .answersheetnews {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #f8f8f8;
      height: 40px;
      P {
        font-size: 18px;
        font-weight: 600;
        color: #000;
        letter-spacing: 2px;
        line-height: 40px;
      }
      ul {
        display: flex;
        li {
          margin-right: 15px;
          line-height: 40px;
          font-size: 14px;
          span {
            display: inline-block;
            width: 14px;
            height: 14px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 5px;
            vertical-align: middle;
          }
        }
      }
    }
  }
  .testpaper {
    flex: 1;
    height: 100%;
    overflow: auto;
  }
  .mainbox {
    background: #fff;
    box-sizing: border-box;
    padding: 15px 60px 15px 20px;
  }
  .zuoti-tie {
    font-size: 18px;
    height: 40px;
    line-height: 40px;
    margin-bottom: 15px;
  }
  .ti {
    box-sizing: border-box;
    border-bottom: 1px solid #f1f0f0;
    padding: 20px 0 20px 45px;
    width: 100%;
  }
}
.el-radio-group {
  width: 100% !important;
}
.el-radio--medium.is-bordered {
  border-radius: 4px;
  height: 36px;
  width: 100% !important;
  margin-top: 15px;
  box-sizing: border-box;
}
.el-radio.is-bordered + .el-radio.is-bordered {
  margin-left: 0;
}
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
  margin-left: 0px;
}
.el-checkbox.is-bordered.el-checkbox--medium {
  padding: 7px 20px 7px 10px;
  border-radius: 4px;
  height: 36px;
  width: 100%;
  margin-top: 14px;
}
.el-footer {
  padding: 12px 20px;
  text-align: center;
}
.listdecorate {
  h1 {
    line-height: 40px;
    font-size: 16px;
  }
  ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    align-content: space-between;
    li {
      width: 40px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      text-align: center;
      border: 1px solid #ccc;
      margin: 5px;
      cursor: pointer;
      border-radius: 4px;
    }
  }
}
.red {
  color: red;
  font-weight: 600;
  letter-spacing: 2px;
}
.liti{
  font-size: 16px;
}
</style>
